﻿@{
    //Layout = null;
}

 <style type="text/css">
        #parent 
        {
            width:100%;
            height:100%;
        }
        .left
        {
            float:left;
            width:20%;
            height:auto;
            overflow-y:scroll; 
            height:700px;
            /*width:400px*/
        }
        .right
        {
            float:left;
            width:80%;
            height:100%;
            height:auto;   
        }
    </style>


     <link href="~/Content/DataForm.css" rel="stylesheet" />
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">

        $(document).ready(function () {


                    var map;                   
                    var iw;
                    var markers = [];

                    function initialize() {
                        var options = {
                            zoom: 6,
                            center: new google.maps.LatLng(-17.434511, -66.225586),
                            mapTypeId: google.maps.MapTypeId.TERRAIN,
                            streetViewControl: false
                        };
                        var mapCanvas = document.getElementById('map_canvas');
                        map = new google.maps.Map(mapCanvas, options);

                        search();
                      
                    }               

                 
                    function search() {                     

                        $.ajax({
                            type: "POST",
                            url: "GetSugerenciaJson",
                            datatype: "json",
                            success: function (data) {
                                clearResults();
                                clearMarkers();
                                for (var i = 0; i < data.length; i++) {

                                    var point = new google.maps.LatLng(data[i].Latitud, data[i].Longitud);

                                    var letter = String.fromCharCode(65 + i);
                                    markers[i] = new google.maps.Marker({
                                        position: point,
                                        animation: google.maps.Animation.DROP
                                        //icon: '../Media/Imagen?guid=' + data[i].GuidUnidad
                                    });
                                    google.maps.event.addListener(
                                        markers[i], 'click', getDetails(data[i], i));
                                    dropMarker(markers[i], i * 100);
                                    addResult(data[i], i);

                                }
                            },                        
                            error : function (data) {
                                alert('No podemos mostrar opciones mientras haya personal mas antiguo que no ha elegido su destino.');
                            }

                        });
                    }

                    function clearMarkers() {
                        for (var i = 0; i < markers.length; i++) {
                            if (markers[i]) {
                                markers[i].setMap(null);
                                delete markers[i]

                            }
                        }
                    }

                    function dropMarker(marker, delay) {
                        window.setTimeout(function () {
                            marker.setMap(map);
                        }, delay);
                    }

                    function addResult(data, i) {
                        var results = document.getElementById('results');
                        var tr = document.createElement('tr');
                        tr.style.backgroundColor = i % 2 == 0 ? '#F0F0F0' : '#FFFFFF';
                        tr.onmouseover= function () {
                            google.maps.event.trigger(markers[i], 'click');
                        };

                        var iconTd = document.createElement('td');
                        var nameTd = document.createElement('td');
                        nameTd.style.fontSize = '9px';
                        var icon = document.createElement('img');
                        icon.src ='../Media/Imagen?guid=' + data.GuidUnidad;
                        icon.style.width = '50px';                        


                        var a = document.createElement('a');
                        var linkText = document.createTextNode('Elegir');
                        a.className = 'button medium orange';
                        a.appendChild(linkText);                        
                        a.href = "Confirmar?guidReq=" + data.GuidRequerimiento;
                        


                        var name = document.createTextNode(data.Nombre);
                        iconTd.appendChild(icon);
                        nameTd.appendChild(name);
                        nameTd.appendChild(document.createElement('br'));
                        nameTd.appendChild(a);

                        tr.appendChild(iconTd);
                        tr.appendChild(nameTd);
                        results.appendChild(tr);
                    }

                    function clearResults() {
                        var results = document.getElementById('results');
                        while (results.childNodes[0]) {
                            results.removeChild(results.childNodes[0]);
                        }
                    }

                    function getDetails(result, i) {
                        
                        return function () {
                            showInfoWindow(result, i);
                        }
                    }

                    function showInfoWindow(result,i) {
                        if (iw)
                        {
                            iw.close();
                            iw = null;
                        }

                        iw = new google.maps.InfoWindow({
                            content: getIWContent(result)
                        });
                        iw.open(map, markers[i]);
                     
                    }

                    function getIWContent(result) {                       

                        var content = '<table style="border:0; height:100px">';
                        //content += '<img src="http://localhost:50564/Media/Imagen?guid="' + result.GuidUnidad + '"/>' + result.Descripcion + '</td>';
                        content += '<tr><td>' + result.Descripcion + '</td>';
                        //content += '<td style="border:0;"><b><a href="' + result.Nombre + '">';
                        //content += result.Nombre + '</a></b></td>';
                        content += '</tr></table>';
                        return content;
                    }

                    google.maps.event.addDomListener(window, 'load', initialize);
        });
    </script>
   
  

@using (Html.BeginForm("Delete", "Arma", FormMethod.Post, new { @class = "box Common", @id = "myDataForm" }))
{
        
    <div class="header">
       Elegir Destino
    </div>    
    
  <div id="parent">         
      <div class="left">
          <table id="results"></table>
      </div>
      <div class="right" >
              <div id="map_canvas" style="height:700px"/>
      </div>
   </div>

    
     <footer>    
         <input type="button" class="btnCancel" value ="Cancelar y Regresar" onclick="history.go(-1);"/>	    
	</footer>
}
